<template>
  <div class="min">
    <div class="head">{{$t('nav.ticker')}}</div>
    <div class="topRight">
      <van-icon class="sort-btn"
                name="descending"
                color="@themeColor"
                @click="handleLink('/ticker/rearrange')" />
      <van-icon name="add-o"
                color="@themeColor"
                @click="handleLink('/ticker/subscribe')" />
    </div>
    <position-details v-if="typeShow === 1"></position-details>
    <portfolio-overview v-else></portfolio-overview>
  </div>
</template> 

<script>
export default {
  layout: 'navigation',
  components: {
    positionDetails: resolve => require(["./components/positionDetails"], resolve),
    portfolioOverview: resolve => require(["./components/portfolioOverview"], resolve)
  },
  data () {
    return {
      typeShow: 1,
    }
  },
  methods: {
    handleLink (path) {
      this.$router.push(path)
    }
  }
}
</script>

<style scoped lang="less">
.min{
  padding: 0 12px;
    .head{
      padding: 14px 0 12px 0;
      font-size: 20px;
      text-align: center;
      font-weight: 500;
      color: #000000;
    }
  .topRight{
    position: absolute;
    right: 12px;
    top: 18px;
    line-height: 20px;
    display: flex;
    align-items: center;
    i{
      flex: 1;
      margin-left: 9px;
      font-size: 20px;
      font-weight: bold;
      &.van-icon-add-o{
        font-size: 18px;
      }
    }
  }
}

</style>
